<template>
  <div>
    <el-table :data="tableData" stripe border>
      <el-table-column align="center" prop="BillNO" label="单据编号" show-overflow-tooltip />
      <el-table-column align="center" prop="BillDate" label="单据日期" show-overflow-tooltip />
      <el-table-column align="center" prop="db" label="工单类型" show-overflow-tooltip />
      <el-table-column align="center" prop="Quantity" label="入库数量" show-overflow-tooltip />
      <el-table-column align="center" prop="ShortName" label="仓库" show-overflow-tooltip />
      <el-table-column align="center" prop="FullName" label="供应商" show-overflow-tooltip />
      <el-table-column align="center" prop="ItemRemark" label="备注" show-overflow-tooltip />
    </el-table>

    <el-pagination
      class="ps_pagination"
      v-model:current-page="page.pageCurrent"
      background
      layout="prev, pager, next,total"
      :total="page.total"
      v-model:page-size="page.pageSize"
    />
  </div>
</template>

<script setup>
import { ref,  watch, watchEffect } from 'vue'

const page = ref({ pageSize: 10, pageCurrent: 1, total: 0 })

const tableData = ref([])
const allData = ref([])

const props = defineProps({
  data: {
    type: Array
  }
})


const updataTableData = () => {
  tableData.value = allData.value.slice(
    (page.value.pageCurrent - 1) * page.value.pageSize,
    page.value.pageSize * page.value.pageCurrent
  )
}


watchEffect(() => {
  allData.value = props.data
  page.value.total = props.data.length
  updataTableData()
})


watch(
  () => page.value.pageCurrent,
  () => {
    updataTableData()
  }
)
</script>

<style scoped lang="scss"></style>
